<template>
    <div class="pages">
        <navigationBar :bgType="3" :backType="2" navigationTitle="分成明细" />
        <view class="content">
            <view class="top_box"></view>
            <view class="box">
                <view class="search flex just-between align-center f-26">
                    <text @click="visible = !visible">查询时间:</text>
                    <view class="time flex align-center">
                        <picker
                            mode="date"
                            :value="startDate"
                            :end="endTime"
                            @change="bindDateChangeStart"
                        >
                            <view
                                class="uni-input"
                                :class="{ placeholder: !startDate }"
                            >
                                {{ startDate || "请选择" }}
                            </view>
                        </picker>
                        <text>至</text>
                        <picker
                            mode="date"
                            :value="endDate"
                            :end="endTime"
                            @change="bindDateChangeEnd"
                        >
                            <view
                                class="uni-input"
                                :class="{ placeholder: !endDate }"
                            >
                                {{ endDate || "请选择" }}
                            </view>
                        </picker>
                    </view>
                </view>
                <view class="statistics flex align-center">
                    <view
                        class="statistics-item flex column align-center just-center"
                    >
                        <text class="number f-32">{{
                            datas.order_num || 0
                        }}</text>
                        <text class="text f-22">订单数量</text>
                    </view>
                    <view
                        class="statistics-item flex column align-center just-center"
                    >
                        <text class="number f-32">
                            ￥{{ datas.service_price || 0 }}
                        </text>
                        <text class="text f-22">项目收益</text>
                    </view>
                    <view
                        class="statistics-item flex column align-center just-center"
                    >
                        <text class="number f-32">
                            ￥{{ datas.car_price || 0 }}
                        </text>
                        <text class="text f-22">车费收益</text>
                    </view>
                </view>
            </view>
            <view class="lists">
                <view
                    class="item"
                    v-for="(
                        { orders, goods, total_price, dealer_money },
                        item,
                        index
                    ) in list"
                    :key="index"
                >
                    <view class="title">
                        <view class="title-top flex align-center just-between">
                            <text class="subtitle">订单收益</text>
                            <text class="price">
                                ￥{{ total_price.toFixed(2) || 0 }}
                            </text>
                        </view>
                        <view
                            class="title-bottom flex align-center just-between"
                        >
                            <text class="time">{{
                                orders.createtime_text
                            }}</text>
                            <text
                                class="status"
                                v-if="showIndex !== index"
                                @click="onChangStatus(index)"
                            >
                                展开
                            </text>
                        </view>
                    </view>
                    <view class="drawers" v-if="index == showIndex">
                        <view class="drawer-item">
                            <view class="drawer-item-title">项目明细</view>
                            <view
                                class="drawer-item-content"
                                v-if="orders.order_sn"
                            >
                                <text class="text">订单编号:</text>
                                <text class="subtext">
                                    {{ orders.order_sn }}
                                </text>
                            </view>
                            <view
                                class="drawer-item-content"
                                v-if="goods.service_name"
                            >
                                <text class="text">项目名称:</text>
                                <text class="subtext">
                                    {{ goods.service_name }}
                                </text>
                            </view>
                            <view
                                class="drawer-item-content"
                                v-if="orders.service_price"
                            >
                                <text class="text">总金额:</text>
                                <text class="subtext">
                                    {{ orders.service_price }}元
                                </text>
                            </view>
                            <view
                                class="drawer-item-content"
                                v-if="orders.discounts || false"
                            >
                                <text class="text">卡券优惠:</text>
                                <text class="subtext">
                                    {{ orders.discounts }}元
                                </text>
                            </view>
                            <view
                                class="drawer-item-content"
                                v-if="orders.commission_proportion || false"
                            >
                                <text class="text">分成比例:</text>
                                <text class="subtext">
                                    {{ orders.commission_proportion }}
                                </text>
                            </view>
                            <view class="drawer-item-content line_top">
                                <text class="text">应得收益:</text>
                                <text class="subtext price">
                                    {{ orders.service_price || 0 }}元
                                </text>
                            </view>
                        </view>

                        <view class="drawer-item" v-if="orders.car_price">
                            <view class="drawer-item-title">车费明细</view>
                            <view class="drawer-item-content">
                                <text class="text">车费收益:</text>
                                <text class="subtext price">
                                    {{ orders.car_price }}元
                                </text>
                            </view>
                        </view>

                        <view class="drawer-item" v-if="dealer_money">
                            <view class="drawer-item-title">
                                经销商扣费明细
                            </view>
                            <view class="drawer-item-content">
                                <text class="text">经销商扣费:</text>
                                <text class="subtext">
                                    {{ dealer_money }}元
                                </text>
                            </view>
                            <!-- <view class="drawer-item-content">
                                <text class="text">渠道扣费:</text>
                                <text class="subtext">
                                    {{ 0 }}元
                                </text>
                            </view>
                            <view class="drawer-item-content">
                                <text class="text">业务员扣费:</text>
                                <text class="subtext">
                                    {{ 0 }}元
                                </text>
                            </view> -->
                            <view class="drawer-item-content line_top">
                                <text class="text">合计扣费:</text>
                                <text class="subtext price">
                                    {{
                                        orders.service_price +
                                            orders.car_price -
                                            dealer_money || 0
                                    }}元
                                </text>
                            </view>
                        </view>

                        <view class="drawer-item earnings line_top">
                            <view class="drawer-item-content">
                                <text>实际收益</text>
                                <text class="price">
                                    {{ total_price.toFixed(2) || 0 }}元
                                </text>
                            </view>
                        </view>
                        <view
                            class="status"
                            v-if="showIndex == index"
                            @click="showIndex = null"
                            >收起</view
                        >
                    </view>
                </view>
            </view>
            <emptyData v-if="list.length == 0" :text="'暂无数据'"></emptyData>
        </view>
    </div>
</template>
<script>
import { getTechnicianEarnings } from "@/API/API/earnings.js";
export default {
    data() {
        // const date = new Date();
        // const years = [];
        // const year = date.getFullYear();
        // const months = [];
        // const month = date.getMonth() + 1;
        // const days = [];
        // const day = date.getDate();
        // for (let i = 1990; i <= date.getFullYear(); i++) {
        //     years.push(i);
        // }
        // for (let i = 1; i <= 12; i++) {
        //     months.push(i);
        // }
        // for (let i = 1; i <= 31; i++) {
        //     days.push(i);
        // }
        // const years1 = [];
        // const year1 = date.getFullYear();
        // const months1 = [];
        // const month1 = date.getMonth() + 1;
        // const days1 = [];
        // const day1 = date.getDate();
        // for (let i = 1990; i <= date.getFullYear(); i++) {
        //     years1.push(i);
        // }
        // for (let i = 1; i <= 12; i++) {
        //     months1.push(i);
        // }
        // for (let i = 1; i <= 31; i++) {
        //     days1.push(i);
        // }
        return {
            datas: {},
            list: [],
            startDate: "",
            endDate: "",
            date: null,
            endTime: "",
            page: 1,
            showIndex: null,
            searchTime: "",
            // years,
            // year,
            // months,
            // month,
            // days,
            // day,
            // years1,
            // year1,
            // months1,
            // month1,
            // days1,
            // day1,
            visible: false,
            // indicatorStyle: `height: 50px;`,
            // value: [9999, month - 1, day - 1, 0, 9999, month1 - 1, day1 - 1],
        };
    },

    onPullDownRefresh() {
        this.onRefresh();
    },

    watch: {
        startDate: {
            handler(nv) {
                if (nv) {
                    if (this.endDate) {
                        this.searchTime = nv + " - " + this.endDate;
                    }
                }
            },
        },
        endDate: {
            handler(nv) {
                if (nv) {
                    if (this.startDate) {
                        this.searchTime = this.startDate + " - " + nv;
                    }
                }
            },
        },
        searchTime: {
            handler(nv) {
                if (nv) {
                    this.list = [];
                    this.getList();
                }
            },
        },
    },
    onLoad() {
        this.getList();
    },
    // 加载
    onReachBottom() {
        if (this.page < this.datas.list.last_page) {
            this.page++;
            this.getList();
        } else {
            return false;
        }
    },
    onShow() {
        this.date = new Date();

        this.endTime =
            this.date.getFullYear().toString() +
            "-" +
            (this.date.getMonth() + 1 < 10
                ? "0" + (this.date.getMonth() + 1)
                : this.date.getMonth() + 1
            ).toString() +
            "-" +
            (this.date.getDate() < 10
                ? "0" + this.date.getDate()
                : this.date.getDate()
            ).toString();
    },

    methods: {
        onRefresh() {
            this.page = 1;
            this.list = [];
            this.getList();  
        },
        bindChange: function (e) {
            const val = e.detail.value;
            this.year = this.years[val[0]];
            this.month = this.months[val[1]];
            this.day = this.days[val[2]];
            this.year1 = this.years[val[4]];
            this.month1 = this.months[val[5]];
            this.day1 = this.days[val[6]];
        },
        // 获取列表
        getList() {
            getTechnicianEarnings({
                type: 1,
                page: this.page,
                searchtime: this.searchTime,
            }).then((res) => {
                this.datas = res.data;
                res.data.list.data.forEach((item) => {
                    item.status = true;
                });
                this.list.push(...res.data.list.data);
            });
        },
        // 收起
        onChangStatus(index) {
            this.showIndex = this.showIndex == index ? null : index;
        },
        // 时间选择
        bindDateChangeStart(e) {
            this.startDate = e.target.value;
        },
        bindDateChangeEnd(e) {
            this.endDate = e.target.value;
            if (e.target.value) {
                this.endTime = e.target.value;
            }
        },
    },
};
</script>
<style lang="scss" scoped>
.content {
    box-sizing: border-box;
    padding: 0 30rpx 20rpx 30rpx;
    .top_box {
        height: 20px;
        background: #f6f6f6;
        position: sticky;
        top: 0px;
        z-index: 997;
    }
    .box {
        padding: 22rpx 34rpx 34rpx 34rpx;
        border-radius: 20rpx;
        color: #fff;
        background: $grad-theme-color;
        position: sticky;
        top: 20px;
        width: 100%;
        z-index: 99;
        margin: 0 auto;
        .search {
            padding-bottom: 54rpx;
            .time {
                > text {
                    margin: 0 20rpx;
                }
            }
        }
        .statistics {
            justify-content: space-around;
            &-item {
                > .text {
                    margin-top: 10rpx;
                }
            }
        }
    }
    .lists {
        padding-top: 20rpx;
        .item {
            font-size: 28rpx;
            margin-top: 20rpx;
            padding: 30rpx 26rpx;
            background: #fff;
            border-radius: 20rpx;
            box-sizing: border-box;
            .title {
                .title-top {
                    .subtitle {
                        font-weight: bold;
                    }
                }
                .title-bottom {
                    font-size: 22rpx;
                    margin-top: 10rpx;
                    .time {
                        color: #999999;
                    }
                    .status {
                        color: #606dce;
                    }
                }
            }
            .drawers {
                padding: 20rpx 0 0 0;
                .drawer-item {
                    .drawer-item-title {
                        font-weight: bold;
                        padding: 18rpx 0;
                        text-align: left;
                    }
                    .drawer-item-content {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding: 15rpx 0;

                        .subtext {
                            margin-left: 20rpx;
                            font-size: 26rpx;
                            color: #666666;
                        }
                    }
                }
                .line_top {
                    border-top: 2rpx solid #ececec;
                }
                .status {
                    color: #606dce;
                    text-align: center;
                    margin-top: 20rpx;
                }
            }
        }
    }
}
.price {
    color: #de4400 !important;
}
.placeholder {
    color: #eeeeee;
}
.no_data {
    text-align: center;
    color: #999999;
    font-size: 28rpx;
    margin-top: 20rpx;
}
.picker {
    border-top: 1px solid #eeeeee;
    box-shadow: 0 0 10rpx #eeeeee;
    transition: all 0.3s;
    width: 750rpx;
    height: 600rpx;
    .picker-btn {
        width: 100%;
        padding: 20rpx 30rpx 0 30rpx;
        box-sizing: border-box;
        background: white;
        color: #000;
        font-size: 28rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .cancel {
            color: #999999;
        }
        .confirm {
            color: #606dce;
        }
    }
    .picker-view {
        width: 100%;
        height: 100%;
        padding: 0 20rpx;
        box-sizing: border-box;
    }
    margin-top: 20rpx;
    position: fixed;
    left: 0;
    bottom: 0;
    background: white;
    color: #000;
}
.item {
    line-height: 100rpx;
    text-align: center;
}
</style>